<template>
	<view class="myWallet">
		<view class="search">
			<view class="search-date">
				<view>时间：</view>
				<view class="search-list">
					{{defaultStartTime}}
					<!-- <image  class="ssel-icon" src="/static/images/ssel.png"></image> -->
					<u-icon name="arrow-down-fill" size="32" color="#ebd093" @click="selStart"></u-icon>
					<u-picker mode="time" :defaultTime="defaultStartTime" v-model="startShow" :params="params"
						end-year="2030" @confirm="confirmStart" confirm-color="#F6AB00" :show-time-tag="true">
					</u-picker>
				</view>
				<view class="zhi">至</view>
				<view class="search-list">
					{{defaultEndTime}}
					<!-- <image @click="selEnd" class="ssel-icon" src="/static/images/ssel.png"></image> -->
					<u-icon name="arrow-down-fill" size="32" color="#ebd093" @click="selEnd"></u-icon>
					<u-picker mode="time" :defaultTime="defaultEndTime" v-model="endShow" :params="params"
						end-year="2030" @confirm="confirmEnd" confirm-color="#F6AB00" :show-time-tag="true"></u-picker>
				</view>
			</view>
		</view>
		<mytable :thList="thList" :tdList="tdList" :userTabPage="userTabPage" @loadMore="handleMore()"></mytable>
	</view>
</template>

<script>
	import mytable from './myTable.vue'
	import api from "@/api/log"
	export default {
		components: {
			mytable
		},
		props: ['date', 'userTabPage'],
		data() {
			return {
				stateIndex: '1',
				mydate: 'today',
				stateList: [{
					label: '全部',
					value: 1,
				}, {
					label: '存款',
					value: 2,
				}, {
					label: '取款',
					value: 3,
				}, {
					label: '下注',
					value: 3,
				}, {
					label: '派奖',
					value: 3,
				}],

				startShow: false,
				endShow: false,
				defaultStartTime: '00:00:00',
				defaultEndTime: '23:59:59',
				defaultSelector: [0],
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},

				thList: [{
					name: '投注积分',
					label_width: 120
				}, {
					name: '投注结果',
					label_width: 120
				}, {
					name: '返回佣金',
					label_width: 120
				}, {
					name: '实际盈亏',
					label_width: 120
				}, ],
				sel: {},
				tdList: [],
				//分页条件
				pageCondition: {
					//当前页后台字段是这个名字
					page: 1,
					//每页条数
					limit: 50
				}
			}
		},
		watch: {
			'date': function(val) {
				if (val) {
					this.mydate = val
					this.pageCondition.page = 1
					this.tdList = []
					this.getData()
				}
			}
		},
		mounted() {
			this.defaultStartTime = this.getDate();
			this.defaultEndTime = this.getDate();
			this.getData()
		},
		methods: {
			getData() {

				switch (this.date) {
					case 'today':
						this.sel.type = 1;
						this.sel.end = '';
						this.sel.start = '';
						break;
					case 'yesterday':
						this.sel.type = 2;
						break;
					case 'week':
						this.sel.type = 3;
						break;
					case 'month':
						this.sel.type = 4;
						break;

					default:
						this.sel.type = 1;;
				}
				this.sel.page = this.pageCondition.page
				this.sel.limit = this.pageCondition.limit
				api.betlog(this.sel).then((res) => {
					if (res.data.code == 200) {
						// this.tdList = res.data.data.data
						this.tdList.push.apply(this.tdList, res.data.data.data)
						if(res.data.data.data.length < 1 && this.pageCondition.page > 1) {
							this.pageCondition.page -= 1
						}
					}
				})
			},
			changeStatus(index) {
				if(index ==1){
					index =0;
				}
				this.current = index
				this.sel.end = '';
				this.sel.start = '';
				this.sel.status = index;
				this.pageCondition.page = 1
				this.tdList = []
			},
			getDate(type) {
				let date = new Date();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				return hour + ':' + minute + ':' + second;

			},
			selStart() {
				this.startShow = true;
			},
			selEnd() {
				this.endShow = true;
			},
			confirmStart(e) {
				this.defaultStartTime = e.hour + ':' + e.minute + ':' + e.second;
				this.sel.start = this.defaultStartTime;
				this.pageCondition.page = 1
				this.tdList = []
				this.getData()
			},
			confirmEnd(e) {
				this.defaultEndTime = e.hour + ':' + e.minute + ':' + e.second;
				this.sel.end = this.defaultEndTime;
				this.pageCondition.page = 1
				this.tdList = []
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myWallet {
		color: #666;
	}

	.search {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.search-state {
			display: flex;
			align-items: center;

			.search-list {
				height: 52rpx;
				width: 148rpx;
				border: solid 2rpx #7f7f7f;
				color: #666666;
				border-radius: 26rpx;
				padding: 4rpx 12rpx;
				display: flex;
				align-items: center;

				/deep/ .u-dropdown__content {
					width: 160rpx;
					height: 500rpx !important;
					left: -20rpx;

					.u-cell-item-box {
						background-color: rgba(0, 0, 0, 0);

						.u-cell {

							padding: 4rpx 24rpx;

							.u-cell__value {
								display: none;
							}
						}
					}

					.u-border-bottom:after {
						display: none;
					}
				}
			}
		}

		.search-date {
			display: flex;
			align-items: center;
			margin-left: 20rpx;

			.search-list {
				height: 52rpx;
				width: 180rpx;
				border: solid 2rpx #7f7f7f;
				color: #666666;
				border-radius: 26rpx;
				padding: 4rpx 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

	}
</style>
